{% extends "base.html" %}

{% block title %}Reset Password - Quick Care Connect{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7">
            <div class="card shadow-lg border-0" style="border-radius: 16px; overflow: hidden;">
                <div class="card-header text-white text-center py-4"
                    style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);">
                    <div style="font-size: 48px; margin-bottom: 8px;">🔒</div>
                    <h3 class="mb-0">Reset Your Password</h3>
                    <p class="mb-0 mt-2" style="opacity: 0.9;">Choose a new strong password</p>
                </div>
                <div class="card-body p-5">


                    <form method="POST" id="reset-form">
                        <div class="mb-4">
                            <label class="form-label fw-semibold">New Password</label>
                            <div class="position-relative">
                                <input type="password" name="password" id="new-password"
                                    class="form-control form-control-lg"
                                    placeholder="Min 8 chars, uppercase, number, special char" required
                                    autocomplete="new-password" style="padding-right: 50px;">
                                <i class="fas fa-eye" id="toggle-new"
                                    style="position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;color:#6c757d;"></i>
                            </div>
                            <!-- Live password requirements checklist -->
                            <div id="pwd-rules" class="mt-2 p-3"
                                style="background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0; display:none;">
                                <div class="small fw-semibold mb-2" style="color:#475569;">Password requirements:</div>
                                <div class="small" id="rule-length" style="color:#94a3b8;">✗ Minimum 8 characters</div>
                                <div class="small" id="rule-upper" style="color:#94a3b8;">✗ At least one uppercase
                                    letter (A-Z)</div>
                                <div class="small" id="rule-lower" style="color:#94a3b8;">✗ At least one lowercase
                                    letter (a-z)</div>
                                <div class="small" id="rule-digit" style="color:#94a3b8;">✗ At least one number (0-9)
                                </div>
                                <div class="small" id="rule-special" style="color:#94a3b8;">✗ At least one special
                                    character (!@#$%^&* etc.)</div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Confirm New Password</label>
                            <div class="position-relative">
                                <input type="password" name="confirm_password" id="confirm-password"
                                    class="form-control form-control-lg" placeholder="Re-enter your new password"
                                    required autocomplete="new-password" style="padding-right: 50px;">
                                <i class="fas fa-eye" id="toggle-confirm"
                                    style="position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;color:#6c757d;"></i>
                            </div>
                            <div id="match-msg" class="small mt-1" style="display:none;"></div>
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-lg text-white fw-semibold"
                                style="background: linear-gradient(135deg, #3b82f6, #1d4ed8); border: none; border-radius: 8px; padding: 14px;">
                                <i class="fas fa-lock me-2"></i> Reset Password
                            </button>
                        </div>
                    </form>

                    <div class="text-center mt-2">
                        <a href="{{ url_for('auth.login') }}" class="text-muted" style="font-size: 0.9rem;">
                            <i class="fas fa-arrow-left me-1"></i> Back to Login
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Password show/hide toggles
        function setupToggle(inputId, toggleId) {
            var input = document.getElementById(inputId);
            var icon = document.getElementById(toggleId);
            if (!input || !icon) return;
            icon.addEventListener('mousedown', function (e) { e.preventDefault(); input.type = 'text'; icon.classList.replace('fa-eye', 'fa-eye-slash'); });
            document.addEventListener('mouseup', function () { input.type = 'password'; icon.classList.replace('fa-eye-slash', 'fa-eye'); });
        }
        setupToggle('new-password', 'toggle-new');
        setupToggle('confirm-password', 'toggle-confirm');

        // Live password strength rule checking
        var newInput = document.getElementById('new-password');
        var confirmInput = document.getElementById('confirm-password');
        var matchMsg = document.getElementById('match-msg');
        var pwdRules = document.getElementById('pwd-rules');
        var ruleLength = document.getElementById('rule-length');
        var ruleUpper = document.getElementById('rule-upper');
        var ruleLower = document.getElementById('rule-lower');
        var ruleDigit = document.getElementById('rule-digit');
        var ruleSpecial = document.getElementById('rule-special');

        var SPECIALS = /[!@#$%^&*()\-_=+\[\]{}|;:,.<>?\/`~"'\\]/;

        function setRule(el, passed) {
            if (passed) {
                el.style.color = '#10b981';
                el.textContent = '✓ ' + el.textContent.substring(2);
            } else {
                el.style.color = '#94a3b8';
                el.textContent = '✗ ' + el.textContent.substring(2);
            }
        }

        function checkStrength() {
            var val = newInput.value;
            pwdRules.style.display = val.length > 0 ? 'block' : 'none';
            setRule(ruleLength, val.length >= 8);
            setRule(ruleUpper, /[A-Z]/.test(val));
            setRule(ruleLower, /[a-z]/.test(val));
            setRule(ruleDigit, /[0-9]/.test(val));
            setRule(ruleSpecial, SPECIALS.test(val));
        }

        function checkMatch() {
            if (!confirmInput.value) { matchMsg.style.display = 'none'; return; }
            if (newInput.value === confirmInput.value) {
                matchMsg.textContent = '✓ Passwords match';
                matchMsg.style.color = '#10b981';
            } else {
                matchMsg.textContent = '✗ Passwords do not match';
                matchMsg.style.color = '#ef4444';
            }
            matchMsg.style.display = 'block';
        }

        if (newInput) newInput.addEventListener('input', function () { checkStrength(); checkMatch(); });
        if (confirmInput) confirmInput.addEventListener('input', checkMatch);
    });
</script>
{% endblock %}